<template>
  <div class="entering">
    <a-card
      :bordered="false"
      style="border-radius:8px;margin-top:10px;"
      :bodyStyle="{ padding: 0 }">
      <div class="enterbox">
        <div v-if="!ischeck" class="mainsearchbox flex row_center flex_wrap">
          <div class="topsearch bold">请校验商品：</div>
          <div style="width:100%;margin-bottom: 13px">
            <a-input v-model="searchipt" placeholder="请粘贴商品链接进行审核" style="height: 43px;border-radius: 4px;"/>
          </div>
          <a-button
            type="primary"
            :disabled="btnloading"
            style="width: 100%;height: 43px;border-radius: 4px;"
            @click="doCheckGather">
            <a-icon v-if="btnloading" type="reload" :spin="btnloading"/>
            {{ btnloading===true?'校验中...':'校验商品' }}
          </a-button>
          <div class="tips">
            <div style="color: #2396F9;padding-bottom: 18px;">重要提醒：</div>
            <div> 1、同一商品请勿重复提交！</div>
            <div> 2、请确保已经和商家对接清楚，切勿中途调整价格和佣金！</div>
          </div>
        </div>
        <div v-else class="enterform">
          <div class="formbox">
            <div class="cartitle">
              采集录入
            </div>
            <a-form-model
              ref="ruleForm"
              :model="form"
              :rules="rules"
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
            >
              <a-form-model-item label="商品原标题 ：">
                <div style="color: #2396F9;"><a
                  :href="'https://detail.tmall.com/item.htm?id='+itemid"
                  target="_blank"
                  rel="noopener noreferrer"> {{ title }}</a></div>
              </a-form-model-item>
              <a-form-model-item ref="short_title" label="商品短标题 ：" prop="short_title">
                <a-input
                  v-model="form.short_title"
                  placeholder="例：品牌+品名+样式+规格等，清楚描述商品，10到20个字以内"
                  style="width: 436px;height: 30px;border-radius: 4px;"
                  @blur="
                    () => {
                      $refs.short_title.onFieldBlur();
                    }
                  "
                />
              </a-form-model-item>
              <a-form-model-item label="商品分类 ：" prop="region">
                <a-select
                  v-model="form.goods_category"
                  placeholder="请选择分类"
                  class="br4"
                  style="width: 127px;height: 30px;">
                  <a-select-option :value="v.title" v-for="(v,k) in classlist" :key="k">
                    {{ v.title }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
              <a-form-model-item ref="price" label="原价：" prop="price">
                <a-input
                  v-model="form.price"
                  placeholder="例：35.6"
                  style="width: 126px;height: 30px;"
                  suffix="元"
                  @blur="
                    () => {
                      $refs.price.onFieldBlur();
                    }
                  "
                />
              </a-form-model-item>
              <!-- <a-form-model-item ref="img" label="商品主图：" prop="img">
                <div class="flex m_b_10">
                  <a-input
                    v-model="form.img"
                    placeholder="请填写淘宝空间主图地址"
                    style="max-width: 436px;height: 30px;border-radius: 4px;"
                    @blur="
                      () => {
                        $refs.img.onFieldBlur();
                      }
                    "
                  />
                  <div class="showimg">
                    <a-upload
                      name="file"
                      action="https://app.letuilm.com/api/upload_tb_img"
                      list-type="picture-card"
                      :multiple="false"
                      :show-upload-list="false"
                      :before-upload="beforeUpload"
                      @change="handleChange2">
                      <div class="nogoodsimg">
                        <a-button type="link">
                          图片转链
                        </a-button>
                      </div>
                    </a-upload>
                  </div>
                </div>
                <div class="radiobox">
                  <a-radio-group v-model="imgchoose" @change="onChange">
                    <a-radio v-for="(v,k) in mainimgslist" :key="k" :value="v">
                      <img :src="v" alt="" style="width: 121px;height: 117px;">
                    </a-radio>
                    <a-radio v-if="form.img" :value="form.img">
                      <img :src="form.img" alt="" style="width: 121px;height: 117px;">
                    </a-radio>
                  </a-radio-group>
                </div>
              </a-form-model-item> -->
              <a-form-model-item label="营销图：" prop="img">
                <div class="yximgbox">
                  <div v-if="form.img==''">
                    <div class="showimg">
                      <a-upload
                        name="file"
                        action="https://app.letuilm.com/api/upload_good_order"
                        list-type="picture-card"
                        :multiple="false"
                        :show-upload-list="false"
                        :before-upload="beforeUpload"
                        @change="handleChange3">
                        <div class="nogoodsimg">
                          <a-button type="link">
                            本地上传
                          </a-button>
                        </div>
                      </a-upload>
                    </div>
                    <div class="huo">或</div>
                    <router-link class="routerlink" tag="div" :to="{path:'/widget/makeSpreadimg'}">在线制作</router-link>
                  </div>
                  <div v-else class="yxtu" style="width: 100%;height: 100%">
                    <img :src="form.img" alt="" style="width: 100%;height: 100%">
                    <a-icon type="close-circle" class="romoveimg" @click="closeimg"/>
                  </div>
                </div>
                <div style="color:rgba(16, 16, 16, 65)">建议宽度为600-800像素，图片显示价格需与所推价格一致</div>
              </a-form-model-item>
              <!-- <a-form-model-item label="精推素材：">
                <a-input
                  v-model="form.pd_pure_url"
                  placeholder="请填写有效的石墨文档或有道云文档的链接（只读）"
                  style="max-width: 436px;height: 30px;border-radius: 4px;"
                />
                <div>
                  <a href="http://www.dataoke.com/hz_tk/gz/?id=1046" target="_blank" rel="noopener noreferrer" style="color: #F78924;">点击查看精推素材提交规范</a>
                </div>
              </a-form-model-item> -->
              <a-form-model-item ref="copywriting" label="推广文案：" prop="copywriting">
                <a-textarea
                  v-model="form.copywriting"
                  style="width: 435px;"
                  :rows="7"
                  @blur="
                    () => {
                      $refs.copywriting.onFieldBlur();
                    }
                  "
                  placeholder="如：护发精华+沐浴乳+洗发乳三件套，三瓶都是280ml哦！美女们，赶紧秒起来！超级划算~"/>
                <!-- <div>20-100字精简文案！突出产品亮点、需求痛点、为什么值得购买！注意不要用空格！</div> -->
              </a-form-model-item>
              <a-form-model-item label="朋友圈文案：">
                <div class="emoji_box">
                  <a-textarea
                    ref="texttemplate"
                    id="emojiInput"
                    v-model="form.friend_text"
                    style="width: 435px;"
                    :rows="7"
                    allow-clear
                    placeholder="每行字数控制在18个汉字以内（包含适当表情），总行数不超过6行，能在朋友圈有较好的展示效果"/>
                  <div id="exampleInputEmoji">
                    <a-button class="br4" style="font-size:14px;width: 98px;height: 30px;padding: 0" @click="openemoji">
                      😃 添加表情
                    </a-button>
                    <vue-emoji
                      class="vue_emoji"
                      v-show="showDialog"
                      @select="selectEmoji2"
                    >
                    </vue-emoji>
                  </div>
                </div>
                <div>爆款必填内容，还有机会上架商品库首页，获取更多流量</div>
              </a-form-model-item>
              <a-divider/>
              <a-form-model-item ref="coupon_url" label="优惠券链接：">
                <div class="">
                  <a-input
                    v-model="form.coupon_url"
                    placeholder="填写同店铺优惠券链接"
                    style="max-width: 558px;min-width:270px;height: 30px;border-radius: 4px;margin-bottom:5px;float: left;"
                    @blur="docheckcoupon"
                  />
                  <a-date-picker
                    v-model="startValue"
                    :disabled-date="disabledStartDate"
                    show-time
                    format="YYYY-MM-DD HH:mm:ss"
                    placeholder="开始时间"
                    @openChange="handleStartOpenChange"
                    style="margin-bottom:5px;float: left;margin-right: 5px;"
                  />
                  <a-date-picker
                    v-model="endValue"
                    :disabled-date="disabledEndDate"
                    show-time
                    format="YYYY-MM-DD HH:mm:ss"
                    placeholder="结束时间"
                    :open="endOpen"
                    @openChange="handleEndOpenChange"
                    style="margin-bottom:5px;float: left;"
                  />
                </div>
              </a-form-model-item>
              <a-form-model-item ref="coupon_name" label="券名称：">
                <a-input
                  v-model="form.coupon_name"
                  placeholder="优惠券名称"
                  style="max-width: 435px;height: 30px;border-radius: 4px;"
                />
              </a-form-model-item>
              <a-form-model-item ref="coupon_full_price" label="满多少使用：">
                <a-input
                  v-model="form.coupon_full_price"
                  placeholder="金额"
                  style="width: 126px;height: 30px;"
                  suffix="元"
                  @blur="
                    () => {
                      $refs.coupon_full_price.onFieldBlur();
                    }
                  "
                />
              </a-form-model-item>
              <a-form-model-item ref="coupon_price" label="券面值：">
                <a-input
                  v-model="form.coupon_price"
                  placeholder="例：9.9"
                  style="width: 126px;height: 30px;"
                  suffix="元"
                  @blur="
                    () => {
                      $refs.coupon_price.onFieldBlur();
                    }
                  "
                />
              </a-form-model-item>
              <a-form-model-item ref="coupon_all_num" label="优惠券总量：">
                <a-input
                  v-model="form.coupon_all_num"
                  placeholder="例：10000"
                  style="width: 126px;height: 30px;"
                  suffix="张"
                  @blur="
                    () => {
                      $refs.coupon_all_num.onFieldBlur();
                    }
                  "
                />
              </a-form-model-item>
              <a-form-model-item ref="coupon_surplus" label="券剩余：">
                <a-input
                  v-model="form.coupon_surplus"
                  placeholder="例：10000"
                  style="width: 126px;height: 30px;"
                  suffix="张"
                  @blur="
                    () => {
                      $refs.coupon_surplus.onFieldBlur();
                    }
                  "
                />
              </a-form-model-item>
              <a-form-model-item ref="after_price" label="券后价：">
                <a-input
                  v-model="form.after_price"
                  placeholder="金额"
                  style="width: 126px;height: 30px;"
                  suffix="元"
                  @blur="
                    () => {
                      $refs.after_price.onFieldBlur();
                    }
                  "
                />
              </a-form-model-item>
              <a-form-model-item label="商品活动：">
                <a-radio-group v-model="form.activity_type">
                  <a-radio :value="1">
                    普通
                  </a-radio>
                  <a-radio :value="2">
                    淘抢购
                  </a-radio>
                  <a-radio :value="3">
                    聚划算
                  </a-radio>
                </a-radio-group>
              </a-form-model-item>
              <a-divider/>
              <a-form-model-item ref="commission" label="佣金比例：" prop="commission">
                <a-input
                  v-model="form.commission"
                  placeholder="例：20.1"
                  style="width: 126px;height: 30px;"
                  suffix="%"
                  @blur="
                    () => {
                      $refs.commission.onFieldBlur();
                    }
                  "
                />
              </a-form-model-item>
              <a-form-model-item ref="service_rate" label="真实服务费率：" prop="service_rate">
                <a-input
                  v-model="form.service_rate"
                  placeholder="例：10"
                  style="width: 126px;height: 30px;"
                  suffix="%"
                  @blur="
                    () => {
                      $refs.service_rate.onFieldBlur();
                    }
                  "
                />
              </a-form-model-item>
              <a-form-model-item label="结算方式：" prop="settlement">
                <a-select
                  v-model="form.settlement"
                  placeholder="请选择结算方式"
                  class="br4"
                  style="max-width: 435px;min-width:380px;height: 30px;">
                  <a-select-option :value="1">
                    支付金额/结算券后价*服务费
                  </a-select-option>
                  <a-select-option :value="2">
                    支付金额*服务费率
                  </a-select-option>
                  <a-select-option :value="3">
                    累计使用张数或件数*服务费单价
                  </a-select-option>
                </a-select>
              </a-form-model-item>
              <a-divider/>
              <a-form-model-item label="对接人员：">
                <a-select
                  v-model="form.user_id"
                  placeholder="请选择对接人员"
                  class="br4"
                  style="width:127px;height: 30px;">
                  <a-select-option :value="v.user_id" v-for="(v,k) in userList" :key="k">
                    {{ v.user }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
              <a-form-model-item label="备注 ：">
                <a-input
                  v-model="form.remark"
                  placeholder="备注，审核人员会看到"
                  style="width: 436px;height: 30px;"
                />
              </a-form-model-item>
              <!--  <a-form-model-item label="店铺QQ/微信：">
                 <a-input
                   v-model="form.si_shopQq"
                   placeholder="商家店铺的QQ/微信"
                   style="max-width: 435px;height: 30px;border-radius: 4px;"
                 />
               </a-form-model-item>
               <a-form-model-item label="店铺电话：" >
                 <a-input
                   v-model="form.si_phone"
                   placeholder="商家店铺的电话"
                   style="max-width: 435px;height: 30px;border-radius: 4px;"
                 />
               </a-form-model-item>
               <a-form-model-item label="联系QQ：">
                 <a-input
                   v-model="form.si_contactQq"
                   placeholder="自己用于联系商家的QQ"
                   style="max-width: 435px;height: 30px;border-radius: 4px;"
                 />
               </a-form-model-item>
               <a-form-model-item label="商品备注：">
                 <a-input
                   v-model="form.pd_mark"
                   placeholder="商品备注，审核可看到"
                   style="max-width: 435px;height: 30px;border-radius: 4px;"
                 />
               </a-form-model-item> -->

              <a-form-model-item :wrapper-col="{ span: 10, offset: 2 }">
                <a-button
                  type="primary"
                  :disabled="btnloading"
                  @click="onSubmit"
                  class="br4"
                  style="width: 210px;height: 39px;">
                  <a-icon v-if="btnloading" type="reload" :spin="btnloading"/>
                  {{ btnloading===true?'提交中...':'提 交 录 入' }}
                </a-button>
              </a-form-model-item>
            </a-form-model>
          </div>
        </div>
        <a-modal
          v-model="iframeshow"
          title="请登录后再检测"
          width="400px"
          ok-text="我已登录"
          cancel-text="取消"
          @ok="hideModal">
          <iframe :src="taobaopurl" frameborder="0" style="width: 100%;height: 400px;"></iframe>
        </a-modal>
      </div>
    </a-card>
  </div>
</template>
<script>
  import moment from 'moment'
  import $ from 'jquery'
  import vueEmoji from '@/components/emoji.vue'
  import { emoji } from '@/utils/emoji.js'
  import { getgoodsclass, docheckcoupon } from '@/api/enteringApi'
  import { doCheckGather, doAddCollectionGoods, getCollectionUserList } from '@/api/gatherApi'

  export default {
    name: 'Entering',
    components: {
      vueEmoji
    },
    data () {
      return {
        moment,
        emoji,
        ischeck: false,
        showEmoji: false,
        showDialog: false,
        btnloading: false,
        iframeshow: false,
        taobaopurl: '',
        searchipt: '',
        labelCol: { span: 2 },
        wrapperCol: { span: 20 },
        other: '',
        title: '',
        imgchoose: '',
        form: {
          goods_category: '', // 商品分类
          item_id: '', // 商品id
          short_title: '', // 短标题
          coupon_url: '', // 优惠券地址
          commission: '', // 佣金比例
          service_rate: '', // 服务费
          activity_type: 1, // 商品活动（普通1，淘抢购2，聚划算3）
          // active: '',
          settlement: 1, // 结算方式
          // manner: '',
          // pd_pure_url: '', // 精推地址
          after_price: '', // 券后价
          coupon_all_num: '', // 优惠券数量
          coupon_surplus: '', // 优惠券剩余数量
          coupon_name: '', // 优惠券名称
          coupon_full_price: '', // 优惠券满多少可用
          coupon_price: '', // 劵面值
          coupon_start_time: '', // 优惠券开始时间
          coupon_end_time: '', // 结束时间
          copywriting: '', // 商品文案
          friend_text: '', // 朋友圈文案
          img: '', // 商品营销图
          shop_name: '', // 店铺名称
          user_id: '', //  处理人员用户id 不传默认分配
          remark: '' // 备注
          // pd_detailArr: '', // 商品信息
          // pd_mark: '', // 备注
          // status: 1, // 检测状态 1通过 2未通过
          // si_shopQq: '', // 店铺qq或微信
          // si_phone: '', // 店铺联系电话
          // si_contactQq: '' // 联系qq
          // price: '' // 商品原价
        },
        rules: {
          short_title: [
            { required: true, message: '请输入商品短标题', trigger: 'blur' }
          ],
          // coupon_url: [
          //   { required: true, message: '请输入优惠券链接', trigger: 'blur' }
          // ],
          service_rate: [
            { required: true, message: '请输入服务费率', trigger: 'blur' }
          ],
          // pd_pure_url: [
          //   { required: true, message: '请输入精推素材', trigger: 'blur' }
          // ],
          // coupon_all_num: [
          //   { required: true, message: '请输入券总数量', trigger: 'blur' }
          // ],
          // coupon_surplus: [
          //   { required: true, message: '请输入券剩余数量', trigger: 'blur' }
          // ],
          // coupon_name: [
          //   { required: true, message: '请输入优惠券名称', trigger: 'blur' }
          // ],
          // coupon_full_price: [
          //   { required: true, message: '请输入满多少元可用', trigger: 'blur' }
          // ],
          // coupon_price: [
          //   { required: true, message: '请输入券面值', trigger: 'blur' }
          // ],
          copywriting: [
            { required: true, message: '请输入推广文案', trigger: 'blur' }
          ],
          friend_text: [
            { required: true, message: '请输入朋友圈文案', trigger: 'blur' }
          ],
          // img: [
          //   { required: true, message: '请输入商品主图地址', trigger: 'blur' }
          // ],
          // pd_mark: [
          //   { required: true, message: '请输入商品备注', trigger: 'blur' }
          // ],
          // si_shopQq: [
          //   { required: true, message: '请输入店铺qq或微信', trigger: 'blur' }
          // ],
          // si_phone: [
          //   { required: true, message: '请输入店铺电话', trigger: 'blur' }
          // ],
          // si_contactQq: [
          //   { required: true, message: '请输入联系的QQ', trigger: 'blur' }
          // ],
          price: [
            { required: true, message: '请输入商品原价', trigger: 'blur' }
          ],
          commission: [
            { required: true, message: '请输入佣金比例', trigger: 'blur' }
          ]
          // after_price: [
          //   { required: true, message: '请输入券后价', trigger: 'blur' }
          // ]
          // date1: [{ required: true, message: 'Please pick a date', trigger: 'change' }],
          // type: [
          //   {
          //     type: 'array',
          //     required: true,
          //     message: 'Please select at least one activity type',
          //     trigger: 'change'
          //   }
          // ],
          // activity_type: [
          //   { required: true, message: '请选择商品活动', trigger: 'change' }
          // ],
          // settlement: [
          //   { required: true, message: '请选择结算方式', trigger: 'change' }
          // ]
        },
        classlist: [
          {
            title: '女装'
          },
          {
            title: '男装'
          },
          {
            title: '内衣'
          },
          {
            title: '母婴儿童'
          },
          {
            title: '美妆护肤'
          },
          {
            title: '家居'
          },
          {
            title: '鞋品'
          },
          {
            title: '箱包'
          },
          {
            title: '配饰'
          },
          {
            title: '美食'
          },
          {
            title: '文体车品'
          },
          {
            title: '家电数码'
          },
          {
            title: '医药保健'
          },
          {
            title: '果蔬'
          },
          {
            title: '其他'
          }
        ],
        mainimgslist: [],
        startValue: null,
        endValue: null,
        endOpen: false,
        itemid: '',
        result: {},
        resArr: {},
        userList: [
          // {
          //   user: "王鹏云", //用户
          //   user_id: 78, //用户id
          //   id: 1 //采集表自增id
          // }
        ],
        priceMoney: ''
      }
    },
    watch: {
      startValue (val) {
        console.log('startValue', val)
        this.form.coupon_start_time = val.format('YYYY-MM-DD HH:mm:ss')
      },
      endValue (val) {
        console.log('endValue', val)
        this.form.coupon_end_time = val.format('YYYY-MM-DD HH:mm:ss')
      }
    },
    computed: {
      issue: function () {
        return this.$store.getters.issue
      }
    },
    created () {
      console.log(this.issue)
      if (this.issue.itemId) {
        this.itemid = this.issue.itemId
        this.searchipt = 'https://detail.tmall.com/item.htm?id=' + this.itemid
        this.docheck()
      }
    },
    destroyed () {
      this.$store.dispatch('setIssuename', '')
    },
    mounted () {
    },
    methods: {
      getCollectionUserList () {
        getCollectionUserList().then(res => {
          console.log(res)
          this.userList = res.data
        }).catch(err => {
          console.log(err)
        })
      },
      selectEmoji2 (code) {
        const codestr = this.emoji(code)
        var elInput = document.getElementById('emojiInput')
        // console.log(elInput);
        // 根据id选择器选中对象
        var startPos = elInput.selectionStart // input 第0个字符到选中的字符
        var endPos = elInput.selectionEnd // 选中的字符到最后的字符
        // console.log(startPos, " --- ", endPos);
        if (startPos === undefined || endPos === undefined) return
        var txt = elInput.value
        // 将表情添加到选中的光标位置
        var result =
          txt.substring(0, startPos) + codestr + txt.substring(endPos)
        elInput.value = result // 赋值给input的value
        // 重新定义光标位置
        elInput.focus()
        elInput.selectionStart = startPos + codestr.length
        elInput.selectionEnd = startPos + codestr.length
        this.form.friend_text = result // 赋值
      },
      openemoji () {
        this.showDialog = !this.showDialog
      },
      docheckcoupon () {
        // https://detail.tmall.com/item.htm?id=630082111728
        // this.form.coupon_url = 'https://uland.taobao.com/quan/detail?sellerId=1120048539&activityId=88d6ec3fd1614dbfb791602c3e50746e'
        if (this.form.coupon_url !== '') {
          docheckcoupon({
            coupon_url: this.form.coupon_url,
            item_id: this.itemid
          }).then(res => {
            // console.log('优惠卷返回', res.data);
            this.form.coupon_all_num = res.data.couponnum // 优惠卷数量
            this.form.coupon_surplus = res.data.couponsurplus // 优惠卷剩余数量
            this.form.coupon_price = res.data.money // 优惠卷金额
            this.form.coupon_start_time = moment(res.data.start_time * 1000).format('YYYY-MM-DD HH:mm:ss') // 优惠券开始时间
            this.form.coupon_end_time = moment(res.data.end_time * 1000) // 结束时间
            this.startValue = moment(res.data.start_time * 1000)
            this.endValue = moment(res.data.end_time * 1000)
            // console.log(this.form.coupon_start_time, this.form.coupon_end_time)
            this.form.after_price = parseFloat(this.priceMoney - res.data.money).toFixed(2)
          }).catch(err => {
            console.log(err)
          })
        }
      },
      closeimg () {
        this.form.img = ''
      },
      hideModal () {
        this.getcata(this.itemid)
        this.iframeshow = false
      },
      getcata (itemId) {
        const that = this
        this.form.item_id = itemId
        const url = 'https://acs.m.taobao.com/h5/mtop.taobao.detail.getdetail/6.0/?&data=%7B%22itemNumId%22%3A%22' + itemId + '%22%7D&qq-pf-to=pcqq.group'
        $.ajax({
          url: url,
          dataType: 'jsonp',
          // jsonp: 'callback',
          success: function (res) {
            console.log('H5', res)
            if (res.data.url) {
              that.taobaopurl = res.data.url
              that.iframeshow = true
              return
            }
            // that.$message.success('该商品可以上单!')
            that.result = res
            if (typeof that.result.data.apiStack !== 'undefined') {
              const apiStack = that.result.data.apiStack[0].value
              const stackArr = JSON.parse(apiStack)
              // console.log('apiStack', stackArr);
              that.priceMoney = parseFloat(stackArr.skuCore.sku2info[0].price.priceMoney) / 100
              that.resArr.sellCount = stackArr.item.sellCount ? stackArr.item.sellCount : stackArr.item.vagueSellCount
            } else {
              that.resArr.sellCount = 9999
              const apiStack = that.result.data.mockData
              const stackArr = JSON.parse(apiStack)
              // console.log('apiStack', stackArr);
              that.priceMoney = stackArr.price.price.priceText
            }
            that.form.shop_name = that.result.data.seller.shopName
            that.form.price = that.priceMoney
            that.resArr.categoryId = that.result.data.item.categoryId
            that.resArr.shopType = that.result.data.seller.shopType
            that.resArr.shopId = that.result.data.seller.shopId
            that.resArr.userId = that.result.data.seller.userId
            that.resArr.shopName = that.result.data.seller.shopName
            that.resArr.shopIcon = that.result.data.seller.shopIcon
            that.resArr.sellerNick = that.result.data.seller.sellerNick
            that.resArr.title = that.result.data.item.title
            that.resArr.rootCategoryId = that.result.data.item.rootCategoryId

            if (!that.resArr.sellCount) {
              that.resArr.sellCount = that.result.data.item.commentCount
            }

            // console.log('resArr', that.resArr);
            that.mainimgslist = that.result.data.item.images
            that.form.pd_detailArr = JSON.stringify(that.resArr)
            that.form.short_title = that.resArr.title // 短标题
            that.title = that.resArr.title
            that.form.price = that.priceMoney
            getgoodsclass({
              rootCategoryId: that.resArr.rootCategoryId
            }).then(res => {
              console.log('分类', res)
              that.form.goods_category = res
              that.ischeck = true
              that.searchipt = ''
              that.btnloading = false
            }).catch(err => {
              console.log(err)
            })
          }
        })
      },
      getUrl (urlstr, name) {
        // console.log('urlstr', urlstr,'name',name);
        const i = urlstr.indexOf('?')
        // console.log('i', i)
        if (i !== -1) {
          urlstr = urlstr.slice(i, urlstr.length) // ?id=xxxxx&a=xxx
          var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
          var r = urlstr.substr(1).match(reg)
          if (r != null) {
            return unescape(r[2])
          } else {
            return null
          }
        } else {
          return urlstr
        }
        // 使用 let id = this.getUrl(this.value,'id');//tips: id是string
      },
      doCheckGather () {
        // console.log(this.searchipt)
        if (this.searchipt !== '') {
          this.itemid = this.getUrl(this.searchipt, 'id')
          this.docheck()
          this.getCollectionUserList()
        } else {
          this.$message.info('请先输入商品链接再检测!')
        }
      },
      docheck () {
        this.btnloading = true
        doCheckGather({
          item_id: this.itemid
        }).then(res => {
          console.log('检测返回', res)
          if (res.data.is_success === 1) {
            this.getcata(this.itemid)
          } else {
            this.btnloading = false
            this.$message.error(res.data.msg)
          }
          // this.form.commission = res.data.commissionRate
        }).catch(err => {
          console.log(err)
        })
      },
      disabledStartDate (startValue) {
        const endValue = this.endValue
        if (!startValue || !endValue) {
          return false
        }
        return startValue.valueOf() > endValue.valueOf()
      },
      disabledEndDate (endValue) {
        const startValue = this.startValue
        if (!endValue || !startValue) {
          return false
        }
        return startValue.valueOf() >= endValue.valueOf()
      },
      handleStartOpenChange (open) {
        if (!open) {
          this.endOpen = true
        }
      },
      handleEndOpenChange (open) {
        this.endOpen = open
      },
      handleChange3 (info) {
        console.log('info', info)
        if (info.file.response) {
          this.form.img = info.file.response.data.url
        }
      },
      handleChange2 (info) {
        console.log('info', info)
        if (info.file.response) {
          this.form.img = info.file.response.data.url
        }
      },
      beforeUpload (file) {
        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
        if (!isJpgOrPng) {
          this.$message.error('对不起,只支持jpg/png格式的图片!')
        }
        const isLt2M = file.size / 1024 / 1024 < 5
        if (!isLt2M) {
          this.$message.error('对不起!图片大小超过5M!')
        }
        return isJpgOrPng && isLt2M
      },
      onChange (e) {
        console.log('radio checked', e.target.value)
        this.form.img = e.target.value
      },
      onSubmit () {
        this.btnloading = true
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            console.log(this.form)

            doAddCollectionGoods(this.form).then(res => {
              console.log(res)
              if (res.code === 200) {
                this.$message.success('提交成功!')
                this.resetForm()
                this.mainimgslist = []
                this.startValue = null
                this.endValue = null
                this.itemid = ''
                this.result = {}
                this.resArr = {}
                this.priceMoney = ''
                this.ischeck = false
                this.btnloading = false
                this.$router.push({
                  path: '/gather/manageGather'
                })
              } else {
                this.btnloading = false
                this.$message.error(res.msg)
              }
            }).catch(err => {
              console.log(err)
              this.$message.error(err.msg)
            })
          } else {
            this.btnloading = false
            console.log('error submit!!')
            return false
          }
        })
      },
      resetForm () {
        this.$refs.ruleForm.resetFields()
      }
    }
  }
</script>
<style lang='less' scoped>
  .entering {
    .enterbox {
      .mainsearchbox {
        max-width: 484px;
        text-align: left;
        margin: 233px auto 391px;

        .topsearch {
          width: 100%;
          margin-bottom: 13px;
          font-size: 14px;
          color: #101010;
        }

        .tips {
          width: 484px;
          height: 114px;
          border: 1px solid rgba(255, 255, 255, 100);
          background-color: rgba(248, 248, 249, 100);
          border-radius: 4px;
          padding: 17px 23px 18px;
          margin-top: 23px;
        }
      }

      .enterform {
        padding: 17px 22px 39px;

        .formbox {
          .cartitle {
            color: #101010;
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 19px;
          }

          /deep/ .ant-input {
            border-radius: 4px !important;
          }

          /deep/ .ant-select-selection {
            border-radius: 4px !important;
          }
        }

        .radiobox {
          /deep/ .ant-radio {
            display: none;
          }

          /deep/ .ant-radio-wrapper {
            margin-right: 67px;
            border: 1px solid transparent !important;
            padding: 2px;

            span {
              padding: 0;
              box-sizing: border-box !important;
            }
          }

          /deep/ .ant-radio-wrapper-checked {
            border: 1px solid #00A0E9 !important;
          }
        }

        .yximgbox {
          border: 1px solid rgb(232, 233, 234);
          width: 218px;
          height: 293px;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-wrap: wrap;
          border-radius: 4px;
          position: relative;
          overflow: hidden;

          .huo {
            height: 20px;
            line-height: 20px;
            text-align: center;
            margin: 10px 0;
          }

          .routerlink {
            height: 20px;
            line-height: 20px;
            text-align: center;
            color: #1890ff;
            cursor: pointer;
          }

          .romoveimg {
            position: absolute;
            top: 0;
            right: 0;
            font-size: 18px;
            font-weight: 600;
            color: red;
            display: none;
          }

          .yxtu:hover {
            .romoveimg {
              display: block;
            }
          }
        }

        .showimg {
          height: 20px;

          /deep/ .ant-upload {
            width: 56px;
            height: 20px;
            padding: 0px;
            margin: 0;
            border: none;
            background-color: transparent;
          }

          /deep/ .ant-btn {
            height: 20px;
          }
        }
      }
    }

    .emoji_box {
      position: relative;

      #exampleInputEmoji {
        position: absolute;
        bottom: 9px;
        right: 1px;

        /deep/ .ant-btn:hover {
          background-color: #fff;
        }

        .vue_emoji {
          position: absolute;
          top: -143px;
          /*left: 66px;*/
          left: 107px;
          border: 1px solid #e8e8e8;

          /deep/ .emoji-controller {
            padding: 0;
          }

          /deep/ .emoji-container {
            // height: 135px!important;
            padding: 0;
          }

        }
      }
    }
  }
</style>
